<template>
  <div id="device-info">
    <div ref="param" style="height: 700px;overflow: auto;">
      <div class="scroll-item">
        <el-form ref="form" :model="form" label-position="top" :inline="true">
          <div class="scroll-item-title">
            <div class="scroll-item-title-before"></div>
            <div class="scroll-item-title-content">基础参数</div>
          </div>
          <div class="card-container head-info">
            <el-row>
              <el-col :span="12">
                <el-form-item label="设备序列号" prop="code">
                  <span class="info-text">{{ pageData.code }}</span>
                  <!-- <el-input v-model="pageData.code" disabled /> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备类型" prop="deviceType">
                  <!-- <el-input :value="formatType(form.deviceType)" disabled /> -->
                  <span class="info-text">{{ formatType(form.deviceType) }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属项目" prop="projectId">
                  <span class="info-text" v-if="opterateType == 'view'">{{ formatProject(form.projectId) }}</span>
                  <el-select v-else v-model="form.projectId" :disabled="opterateType == 'view'" placeholder="请选择所属项目">
                    <el-option v-for="item in projectList" :key="item.projectId" :label="item.shortName"
                      :value="item.projectId">
                    </el-option>
                  </el-select>
                </el-form-item></el-col>
              <el-col :span="12">
                <el-form-item label="设备型号" prop="modelId">
                  <span class="info-text" v-if="opterateType == 'view'">{{ formatModel(form.modelId) }}</span>
                  <el-select v-else v-model="form.modelId" :disabled="opterateType == 'view'" placeholder="请选择设备型号">
                    <el-option v-for="item in modList" :key="item.modelId" :label="item.model" :value="item.modelId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="scroll-item-title">
            <div class="scroll-item-title-before"></div>
            <div class="scroll-item-title-content">版本信息</div>
          </div>
          <div class="card-container">
            <el-row>
              <el-col :span="12">
                <el-form-item label="软件版本" prop="softwareVersion">
                  <span class="info-text">{{ pageData.softwareVersion }}</span>
                  <!-- <el-input v-model="pageData.softwareVersion" disabled /> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="固件版本" prop="firmwareVersion">
                  <span class="info-text">{{ pageData.firmwareVersion }}</span>
                  <!-- <el-input v-model="pageData.firmwareVersion" disabled /> -->
                  <!-- <el-tooltip class="item" effect="dark" :content="pageData.firmwareVersion" placement="top-start">
              <div class="contant">
                <span show-overflow-tooltip>{{ pageData.firmwareVersion }}</span>
              </div>
            </el-tooltip> -->
                </el-form-item>
              </el-col>
            </el-row>

          </div>
          <div class="scroll-item-title">
            <div class="scroll-item-title-before"></div>
            <div class="scroll-item-title-content">位置信息</div>
          </div>
          <div class="card-container" style="display: flex;">
            <div style="flex: 1;display: flex;flex-direction: column;">
              <el-form-item label="经度" prop="longitude">
                <span class="info-text">{{ pageData.longitude }}</span>
                <!-- <el-input v-model="pageData.longitude" disabled /> -->
              </el-form-item>
              <el-form-item label="纬度" prop="latitude">
                <span class="info-text">{{ pageData.latitude }}</span>
                <!-- <el-input v-model="pageData.latitude" disabled /> -->
              </el-form-item>
              <el-form-item label="安装地址" prop="address">
                <span class="info-text">{{ pageData.address }}</span>
                <!-- <el-input v-model="pageData.address" disabled /> -->
              </el-form-item>
            </div>
            <div style="flex: 1;">
              <new-map ref="map" :pageData="pageData"></new-map>
            </div>
          </div>
        </el-form>



      </div>
      <div class="scroll-item">
        <div class="scroll-item-title">
          <div class="scroll-item-title-before"></div>
          <div class="scroll-item-title-content">设备性能</div>
        </div>
        <div class="card-container">
          <p class="top-title">实时数据</p>
          <div class="performance-box">
            <p class="performance-text"><span>内存使用率</span><span>{{ realTimeData.memoryUse || "" }}G/{{
              realTimeData.memoryTotal || ""
            }}G</span></p>
            <div class="schedule-box">
              <div class="schedule-inner"
                :style="'width:' + ((Number(realTimeData.memoryUse) / Number(realTimeData.memoryTotal) * 100).toFixed(0)) + '%'">
              </div>
            </div>
          </div>
          <div class="performance-box">
            <p class="performance-text"><span>CPU使用率</span><span>{{ realTimeData.cpuUseRate ? realTimeData.cpuUseRate +
              '%'
              : '-'
            }}</span></p>
            <div class="schedule-box">
              <div class="schedule-inner" :style="'width:' + realTimeData.cpuUseRate + '%'"></div>
            </div>
          </div>
          <div class="performance-box">
            <p class="performance-text"><span>存储使用率</span><span>{{ realTimeData.storageUse || "" }}G/{{
              realTimeData.storageTotal || ""
            }}G</span></p>
            <div class="schedule-box">
              <div class="schedule-inner"
                :style="'width:' + (Number(realTimeData.storageUse) / Number(realTimeData.storageTotal) * 100).toFixed(0) + '%'">
              </div>
            </div>
          </div>
          <div>
            <p class="top-title">历史数据</p>
            <div class="device-search">
              <span class="search-time">查询时间</span>
              <span @click.once="changeInitCalendarPage" class="date-box">
                <el-date-picker v-model="deviceTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" value-format="timestamp" :picker-options="pickerOptions">
                </el-date-picker>
              </span>
              <el-button :disabled="!deviceTime" @click="handleDeviceSearch">查询</el-button>
            </div>
            <div class="device-userate" ref="userate"></div>
          </div>
        </div>
      </div>
      <div class="scroll-item">
        <div class="scroll-item-title">
          <div class="scroll-item-title-before"></div>
          <div class="scroll-item-title-content">传感器信息</div>
        </div>
        <div class="card-container">
          <p class="top-title">实时数据</p>
          <div class="sensor-box">
            <div class="sensor-info">
              <div>
                <span>温度</span>
                <span>{{ realTimeData.temperature ? realTimeData.temperature + '℃' : '' }}</span>
              </div>
              <div>
                <span>湿度</span>
                <span>{{ realTimeData.humidity ? realTimeData.humidity + '%rh' : '' }}</span>
              </div>
              <div>
                <span>气压</span>
                <span>{{ realTimeData.pressure ? realTimeData.pressure + 'hpa' : '' }}</span>
              </div>
            </div>
            <p class="top-title">历史数据</p>
            <div class="device-search">
              <span class="search-time">查询时间</span>
              <span @click.once="changeInitCalendarPage" class="date-box">
                <el-date-picker v-model="sensorTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" value-format="timestamp" :picker-options="pickerOptions">
                </el-date-picker>
              </span>
              <el-button :disabled="!sensorTime" @click="handleSensorSearch">查询</el-button>
            </div>
            <div class="device-userate" ref="sensor"></div>
          </div>
        </div>
      </div>
      <div class="scroll-item">
        <div class="scroll-item-title">
          <div class="scroll-item-title-before"></div>
          <div class="scroll-item-title-content">服务状态</div>
        </div>
        <div class="card-container">
          <p class="top-title">实时数据</p>
          <div class="sever-info">
            <div><span>MQTT服务</span><span> {{ realTimeData.mqttStatus == '1' ? '连接成功' : '连接不成功' }}<svg-icon
                  :icon-class="realTimeData.mqttStatus == '1' ? 'success' : 'fail'" /></span></div>
            <div><span>NTP对时服务</span><span>{{ realTimeData.ntpTimeStatus == '1' ? '连接成功' : '连接不成功' }}<svg-icon
                  :icon-class="realTimeData.ntpTimeStatus == '1' ? 'success' : 'fail'" /></span> </div>
            <div><span>定位服务</span><span>{{ realTimeData.gpsStatus == '1' ? '连接成功' : '连接不成功' }}<svg-icon
                  :icon-class="realTimeData.gpsStatus == '1' ? 'success' : 'fail'" /> </span> </div>
            <div><span>文件服务</span><span> {{ realTimeData.fileStatus == '1' ? '连接成功' : '连接不成功' }}<svg-icon
                  :icon-class="realTimeData.fileStatus == '1' ? 'success' : 'fail'" /></span> </div>
            <div><span>屏显服务</span><span>{{ screenStatus == '1' ? '开启' : '关闭' }}<svg-icon
                  :icon-class="screenStatus == '1' ? 'success' : 'fail'" /></span> </div>
          </div>
        </div>
      </div>
      <div class="scroll-item">
        <div class="scroll-item-title">
          <div class="scroll-item-title-before"></div>
          <div class="scroll-item-title-content">网络信息</div>
        </div>
        <div class="card-container">
          <p class="top-title">实时数据</p>
          <div class="sever-info">
            <!-- <svg-icon :icon-class="realTimeData.networkType == '1'
              ? 'net'
              : realTimeData.networkType == '2'
                ? 'wifi' + realTimeData.signalStrength
                : '4g' + realTimeData.signalStrength
              " /> -->
            <div><span>网络类型</span><span> {{ formatNetType(realTimeData.networkType) }}</span></div>
            <div><span>信号强度</span><span>{{ ((Number(realTimeData.signalStrength) + 1) / 5 * 100).toFixed(0) + '%' }}
              </span>
            </div>
            <div><span>网络信号</span><span>{{ realTimeData.networkSignal ? (realTimeData.networkSignal + 'db') : '-'
            }}</span> </div>
            <div><span>延时</span><span> {{ realTimeData.timeDelay ? (realTimeData.timeDelay + 'ms') : '-' }}</span> </div>
            <div><span>设备IP</span><span>{{ realTimeData.deviceIp }}</span> </div>
            <div><span>imei</span><span>{{ realTimeData.imei }}</span> </div>
            <div><span>iccid</span><span>{{ realTimeData.iccid }}</span> </div>
            <div><span>imsi</span><span>{{ realTimeData.imsi }}</span> </div>
            <div><span>msisdn</span><span>{{ realTimeData.msisdn }}</span> </div>
          </div>
          <p class="top-title">历史数据</p>
          <div class="device-search">
            <span class="search-time">查询时间</span>
            <span @click.once="changeInitCalendarPage" class="date-box">
              <el-date-picker v-model="netWorkTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="timestamp" :picker-options="pickerOptions">
              </el-date-picker>
            </span>
            <el-button :disabled="!netWorkTime" @click="handleNetSearch">查询</el-button>

            <div class="device-userate" ref="network"></div>
          </div>
        </div>
      </div>
      <div class="scroll-item">
        <div class="scroll-item-title">
          <div class="scroll-item-title-before"></div>
          <div class="scroll-item-title-content">电池信息</div>
        </div>
        <div class="card-container">
          <p class="top-title">实时数据</p>
          <div class="sever-info">
            <div><span>电量服务</span><span>{{ realTimeData.electricityType ? realTimeData.electricityType == "1"
              ? "市电供电"
              : "电池供电" : '-'
            }}</span> </div>
            <div><span>实时电压</span><span>{{ realTimeData.voltage ? (Number(realTimeData.voltage) / 1000 + 'v') : '-'
            }}</span> </div>

          </div>
          <p class="top-title">历史数据</p>
          <div class="device-search">
            <span class="search-time">查询时间</span>
            <span @click.once="changeInitCalendarPage" class="date-box">
              <el-date-picker v-model="batteryTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="timestamp" :picker-options="pickerOptions">
              </el-date-picker>
            </span>
            <el-button :disabled="!batteryTime" @click="handleBattery">查询</el-button>
            <div class="title" v-show="isshow">
                  <span>市电供电</span>
                  <span class="lastspan">电池供电</span>
                </div>
            <div id="battery" ref="battery"></div>
          </div>
        </div>
      </div>

    </div>
    <div class="foot-btn">
      <el-button @click="handleToEdit" v-if="opterateType == 'view'" v-hasPermi="['project:edit']">编
        辑</el-button>
      <el-button @click="submitForm" v-if="opterateType != 'view'" :loading="uploading" :disabled="uploading">确
        定</el-button>
      <el-button @click="cancel" v-if="opterateType != 'view'">取 消</el-button>
    </div>

  </div>
</template>

<script>
import {
  downloadScreenshotFile,
  getUseRateWaveform,
  getDeviceRealTimeData,
  getVoltageWaveform,
  getNetworkWaveform,
  getSensorWaveform,
  getTimeDelayWaveform,
  getScreenInfo
} from "@/api/allDevice/allDevice";
import newMap from "@/components/aliMap/index.vue";
import { getDevice } from "@/api/device/device";
import { updateAllDevice } from "@/api/allDevice/allDevice";
import { getProject } from "@/api/runningLog/runningLog.js";
import * as echarts from "echarts";
import "echarts-liquidfill/src/liquidFill.js"; //在这里引入
require("echarts/theme/macarons");
export default {
  name: "deviceInfo",
  dicts: ["sys_sever_status", "sys_device_mode",],
  components: {
    newMap
  },
  props: {
    pageData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      opterateType: 'view',
      form: {},
      modList: [],
      projectList: [],
      uploading: false,
      timer: null,
      dialogLogs: false,
      activeName: "userate",
      paramList: this.pageData,
      mapSrc: null,
      batteryDate: new Date(new Date().setHours(0, 0, 0, 0)).getTime(),
      deviceTime: null,
      chartDom: {},
      realTimeData: {},
      chartSensor: null,
      timer: null,
      sensorTime: null,
      chartNetSignal: null,
      chartNetWork: null,
      netWorkTime: null,
      warnTabData: [],
      reportTabData: [],
      dialogVisible: false,
      messageData: {},
      batteryTime: null,
      screenStatus: null,//屏幕状态
      isshow: false,
      pickerOptions: {
        //禁用当前日期之前的日期
        disabledDate(time) {
          //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
          return time.getTime() > Date.now();
        },
      },
    };
  },
  created() {
    this.realTime();
    this.getRealTimeData();
    this.handleModeType();
    this.getConfig();
    this.getScreenInfo()
    getDevice(this.pageData.deviceId).then(async (response) => {
      this.form = response.data
    });
  },
  mounted() {
    // this.batteryInit()
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    // 获取设备信息
    async getConfig() {
      this.modList = await this.$api.getMod();
      const res = await getProject();
      if (res.code == 200) {
        this.projectList = res.data;
      }
    },
    // 获取设备类型
    async handleModeType(type) {
      let data = await this.$api.getMod({ type: this.form.deviceType });
      this.modList = data;
      this.form.modelId = null;
    },
    // 设备类型
    formatType(val) {
      switch (val) {
        case '1':
          return "预警终端";
        case '2':
          return "预警喇叭";
        default:
          break;
      }
    },
    // 项目格式化
    formatProject(val) {
      let _project = this.projectList.filter(item => {
        return item.projectId == val
      })
      return _project[0]?.shortName
    },
    // 设备格式化
    formatModel(val) {
      let _model = this.modList.filter(item => {
        return item.modelId == val
      })
      return _model[0]?.model
    },

    // 编辑
    handleToEdit() {
      this.opterateType = 'edit'
    },
    // 提交
    submitForm() {
      updateAllDevice(this.form).then((response) => {
        this.$modal.msgSuccess("编辑成功");
        this.opterateType = 'view'
        this.getList();
      });
    },
    // 取消
    cancel() {
      this.opterateType = 'view'
    },
    changeInitCalendarPage() {
      let element = document.querySelectorAll(
        ".el-picker-panel__icon-btn.el-icon-arrow-left"
      )
      console.log(element, 'element')
      if (element) element[element.length - 1].click();
    },
    // 获取屏幕状态
    async getScreenInfo() {
      let res = await getScreenInfo(this.pageData.code)
      if (res.code == 200) {
        this.screenStatus = res.data.status
        console.log(this.screenStatus, 'this.screenStatus')
      }
      console.log(res, 'res11111')
    },


    // 设备性能历史数据查询
    async handleDeviceSearch() {
      const res = await getUseRateWaveform({
        code: this.pageData.code,
        startTime: this.deviceTime[0],
        endTime: this.deviceTime[1],
      });
      console.log(res, "this.deviceTime[0]");
      if (res.code == 200) {
        this.deviceUseRateInit(res.data);
      }
    },
    // 传感器历史数据查询
    async handleSensorSearch() {
      const res = await getSensorWaveform({
        code: this.pageData.code,
        startTime: this.sensorTime[0],
        endTime: this.sensorTime[1],
      });
      console.log(res, "this.sensorTime[0]");
      if (res.code == 200) {
        for (const keys in res.data) {
          if (Array.isArray(res.data[keys])) {
            for (let index = 0; index < res.data[keys].length; index++) {
              if (res.data[keys][index] == 0) {
                res.data[keys][index] = res.data[keys][index - 1];
              }
            }
          }
        }
        this.sensorInit(res.data);
      }
    },
    // 网络历史数据查询
    async handleNetSearch() {
      const res = await getNetworkWaveform({
        code: this.pageData.code,
        startTime: this.netWorkTime[0],
        endTime: this.netWorkTime[1],
      });
      console.log(res, "this.deviceTime[0]");
      // let _data = res.data.networkSignalData.map(item => {
      //   return Math.abs(item)
      // })
      const res1 = await getTimeDelayWaveform({
        code: this.pageData.code,
        startTime: this.netWorkTime[0],
        endTime: this.netWorkTime[1],
      });
      console.log(res, "this.deviceTime[0]");

      // res1.data.timeDelay.forEach(item => {
      //   if (item <br 0) {
      //     item = 0
      //   }
      // })
      this.networkChartInit(res.data, res1.data);
    },

    // 获取实时信息
    getRealTimeData() {
      this.timer = setInterval(() => {
        this.realTime();
      }, 5000);
    },
    // 实时数据查询
    async realTime() {
      const res = await getDeviceRealTimeData(this.pageData.deviceId);
      if (res.code == 200) {
        this.realTimeData = res.data || {};
        if (Object.keys(this.realTimeData).length == 0) {
          return;
        }
      }
    },
    // 查询电池监测
    async handleBattery() {
      const res = await getVoltageWaveform({
        code: this.paramList.code,
        startTime: this.batteryTime[0],
        endTime: this.batteryTime[1],
      });
      if (res.code == 200) {
        let yData = [];
        if (res.data.ydata) {
          res.data.ydata.forEach((item, index) => {
            yData.push({
              value: Number(item) / 1000,
              type: res.data.typeData[index],
            });
          });
          this.batteryInit(res.data, yData);
        }
      }
    },

    // 截图功能
    async downloadScreenshotFile(id) {
      let res = await downloadScreenshotFile({
        code: this.paramList.code,
        type: id,
      });
      // if (res.code == 200) {
      this.mapSrc = "data:image/png;base64," + res;
      console.log("res: ", res);
    },

    // 实时截图
    handleImg() {
      this.downloadScreenshotFile("1");
    },

    // 高清截图
    handleHDimg() {
      this.downloadScreenshotFile("2");
    },
    // 设备性能折线图初始化
    deviceUseRateInit(data) {
      this.$refs.userate.style.height = '500px'
      this.chartUseRate = echarts.init(this.$refs.userate);
      let option = {
        // backgroundColor: "rgba(0, 21, 41, 0.35)",
        tooltip: {
          trigger: "axis",
        },
        title: {
          // text: `{a|分部毛利率图}`,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: "2%",
          left: "2%",
        },
        legend: {
          data: ["内存", "CPU", "存储"],
          textStyle: {
            color: '#fff',
            align: "right",
          },
          top: "2%",
          right: "2%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false, //坐标轴两边留白
          data: data.xdata,
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            // interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
              color: "#fff",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 12,
            },
            formatter: function (value) {
              return value.split(".")[0];
            },
            showMaxLabel: true,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: "#E5E9ED",
              // opacity:0.2
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                // 	opacity:0.1
              },
            },
            axisLabel: {
              show: true,
              margin: 20,
              formatter: "{value} %",
              textStyle: {
                color: "#fff",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12,
              },
            },
          },
        ],
        series: [
          {
            name: "内存",
            type: "line",
            showSymbol: false,
            itemStyle: {
              normal: {
                color: "#1EE882",
                lineStyle: {
                  color: "#1EE882",
                  width: 1,
                },
                // areaStyle: {
                //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                //     {
                //       offset: 0,
                //       color: 'rgba(30,232,130,0)',
                //     },
                //     {
                //       offset: 1,
                //       color: 'rgba(30,232,130,0.5)',
                //     },
                //   ]),
                // },
              },
            },
            data: data.memoryUseRate,
          },
          {
            name: "CPU",
            type: "line",
            showSymbol: false,
            itemStyle: {
              normal: {
                color: "rgba(180,20,215,1)",
                lineStyle: {
                  color: "rgba(180,20,215,1)",
                  width: 1,
                },
                // areaStyle: {
                //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                //     {
                //       offset: 0,
                //       color: 'rgba(253,222,9,0)',
                //     },
                //     {
                //       offset: 1,
                //       color: 'rgba(253,222,9,0.5)',
                //     },
                //   ]),
                // },
              },
            },
            data: data.cpuUseRate,
          },
          {
            name: "存储",
            type: "line",
            showSymbol: false,
            itemStyle: {
              normal: {
                color: "rgba(20,111,215,1)",
                lineStyle: {
                  color: "rgba(20,111,215,1)",
                  width: 1,
                },
                // areaStyle: {
                //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                //     {
                //       offset: 0,
                //       color: 'rgba(20,111,215,0)',
                //     },
                //     {
                //       offset: 1,
                //       color: 'rgba(20,111,215,0.5)',
                //     },
                //   ]),
                // },
              },
            },
            data: data.storageUseRate,
          },
        ],
      };
      this.chartUseRate.setOption(option);
    },


    // 传感器折线图初始化
    sensorInit(data) {
      this.$refs.sensor.style.height = '600px'
      this.chartSensor = echarts.init(this.$refs.sensor);
      let option = {
        // backgroundColor: "rgba(0, 21, 41, 0.35)",
        title: [
          {
            top: "3",
            text: "温度(C°)",
            textStyle: {
              color: '#fff'
            },
          },
          {
            top: "31%",
            text: "湿度(rh)",
            textStyle: {
              color: '#fff'
            },
          },
          {
            top: "65%",
            text: "气压(hpa)",
            textStyle: {
              color: '#fff'
            },
          },
        ],
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false, //坐标轴两边留白
            data: data.xdata,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              // interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
              //	margin:15,
              textStyle: {
                color: "#fff",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12,
              },
              formatter: function (value) {
                return value.split(".")[0];
              },
              showMaxLabel: true,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#E5E9ED",
                // opacity:0.2
              },
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: "category",
            boundaryGap: false, //坐标轴两边留白
            data: data.xdata,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              // interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
              //	margin:15,
              textStyle: {
                color: "#fff",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12,
              },
              formatter: function (value) {
                return value.split(".")[0];
              },
              showMaxLabel: true,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#E5E9ED",
                // opacity:0.2
              },
            },
            splitLine: {
              show: false,
            },
            gridIndex: 1,
          },
          {
            type: "category",
            boundaryGap: false, //坐标轴两边留白
            data: data.xdata,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              // interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
              //	margin:15,
              textStyle: {
                color: "#fff",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12,
              },
              formatter: function (value) {
                return value.split(".")[0];
              },
              showMaxLabel: true,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#E5E9ED",
                // opacity:0.2
              },
            },
            splitLine: {
              show: false,
            },
            gridIndex: 2,
          },
        ],
        yAxis: [
          {
            axisLabel: {
              textStyle: {
                color: '#fff'
              },
            },
          },
          {
            gridIndex: 1,
            axisLabel: {
              textStyle: {
                color: '#fff'
              },
              formatter: function (value) {
                return value + "%";
              },
            },
          },
          {
            gridIndex: 2,
            axisLabel: {
              textStyle: {
                color: '#fff'
              },
            },
          },
        ],
        grid: [
          {
            top: "5%",
            bottom: "72%",
          },
          {
            top: "38%",
            bottom: "38%",
          },
          {
            top: "72%",
            bottom: "5%",
          },
        ],
        series: [
          {
            name: "温度",
            type: "line",
            showSymbol: false,
            data: data.temperatureData,
          },
          {
            name: "湿度",
            type: "line",
            showSymbol: false,
            data: data.humidityData,
            xAxisIndex: 1,
            yAxisIndex: 1,
          },
          {
            name: "气压",
            type: "line",
            showSymbol: false,
            data: data.pressureData,
            xAxisIndex: 2,
            yAxisIndex: 2,
          },
        ],
      };

      this.chartSensor.setOption(option);
    },

    // 网络折线图初始化
    networkChartInit(data, delaydata, ydata) {
      this.$refs.network.style.height = '500px'
      this.chartNetWork = echarts.init(this.$refs.network);
      let option = {
        title: [
          {
            top: "3%",
            text: "网络信号",
            textStyle: {
              color: '#fff'
            },
          },
          {
            top: "52%",
            text: "网络延时",
            textStyle: {
              color: '#fff'
            },
          },
        ],

        tooltip: {
          trigger: "axis",
        },
        grid: [
          {
            top: "10%",
            bottom: "52%",
          },
          {
            top: "60%",
            bottom: "5%",
          },
        ],
        xAxis: [
          {
            type: "category",
            data: data.xdata,
            axisLabel: {
              textStyle: {
                color: '#fff'
              },
              formatter: function (value) {
                return value.split(".")[0];
              },
              showMaxLabel: true,
            },
          },
          {
            gridIndex: 1,
            type: "category",
            data: delaydata.xdata,
            axisLabel: {
              textStyle: {
                color: '#fff'
              },
              formatter: function (value) {
                return value.split(".")[0];
              },
              showMaxLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            inverse: true,
            axisLabel: {
              textStyle: {
                color: '#fff'
              },
              formatter: function (value) {
                return value != 0 ? value + "db" : value;
              },
              showMaxLabel: true,
            },
            axisLine: {
              onZero: false,
            },
          },
          {
            gridIndex: 1,
            type: "value",
            axisLabel: {
              textStyle: {
                color: '#fff'
              },
            },
          },
        ],
        series: [
          {
            name: "网络信号",
            data: data.networkSignalData,
            type: "line",
            showSymbol: false,
            // tooltip: {  // 第一个图表的 tooltip 格式化
            //   show:true,
            //   trigger: 'item',
            //   formatter: '{b}<br />{a}:-{c}db'
            // }
          },
          {
            name: "网络延时",
            data: delaydata.timeDelay,
            type: "line",
            showSymbol: false,
            xAxisIndex: 1,
            yAxisIndex: 1,
            // tooltip: {  // 第一个图表的 tooltip 格式化
            //   show:true,
            //   trigger: 'item',
            //   formatter: '{b}<br />{a}:{c}ms'
            // }
          },
        ],
      };
      this.chartNetWork.setOption(option);
    },

    // 电量监测图表
    async batteryInit(data, ydata) {
      this.$refs.battery.style.height = '500px'
      this.chartDom = echarts.init(document.getElementById("battery"));
      let option = {
        // title: {
        //   textStyle: {
        //     // color: '#fff',
        //     fontSize: '16px'
        //   },
        //   text:'市电供电：；电池供电',
        //   top: '5%',
        //   left: '4%',
        // },
        grid: [
          {
            top: "25%",
            bottom: "15%",
            right: "8%",
            left: "8%",
          },
        ],
        tooltip: {
          trigger: "axis",
          formatter: function (param) {
            return `${param[0].name} </br> ${param[0].data.type == "1" ? "市电供电" : "电池供电"
              }:${param[0].data.value}`;
          },
        },
        xAxis: [
          {
            type: "category",
            data: data.xdata,
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12,
              },
              formatter: function (value) {
                return value.split(".")[0];
                // const date = new Date(Number(value))
                // return `${date.getHours() <= 9 ? '0' + date.getHours() : date.getHours()}:${date.getMinutes() <= 9 ? '0' + date.getMinutes() : date.getMinutes()}:${date.getSeconds() <= 9 ? '0' + date.getSeconds() : date.getSeconds()}`
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            axisLine: {
              onZero: false,
            },
            axisLabel: {
              // color: '#fff',
              textStyle: {
              color: "#fff",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 12,
            },
            },
            axisTick: {
              show: false,
            },
            scale: true,
          },
        ],
        series: [
          {
            name: "市电供电",
            type: "line",
            // symbol: 'none',
            symbolSize: 5,
            symbol: "circle",
            lineStyle: {
              normal: {
                width: 4,
                color: {
                  type: "linear",
                  colorStops: [
                    {
                      offset: 0,
                      color: "#A9F387", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#48D8BF", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(72,216,191, 0.3)",
                shadowBlur: 5,
                shadowOffsetY: 10,
              },
            },
            smooth: true,
            data: ydata,
            itemStyle: {
              color: function (params) {
                // 根据 category 字段返回不同的颜色
                var colorList = {
                  1: "#ff0000",
                  2: "#0000ff",
                };
                return colorList[params.data.type];
              },
            },
          },
        ],
      };
      this.isshow = true;
      this.chartDom.setOption(option);
      // const res= await deviceVoltageWaveform()
    },

    // 网络类型
    formatNetType(val) {
      switch (val) {
        case "1":
          return "有线";
        case "2":
          return "wifi";
        case "3":
          return "4G";
        default:
          break;
      }
    },

    changeInitCalendarPage() {
      console.log("123");
      let element = document.querySelectorAll(
        ".el-picker-panel__icon-btn.el-icon-arrow-left"
      )
      console.log(element, 'element')
      if (element) element[element.length - 1].click();
    },


  },
};
</script>

<style lang="scss" scoped>
#device-info {
  width: 100%;
  height: 100%;
  padding: 20px;
  padding-right: 0;
  position: relative;
  box-sizing: border-box;
}

// .scroll-content {
//   position: relative;
//   width: 100%;


.scroll-item {
  width: calc(100% - 20px);
  margin-bottom: 10px;

  .scroll-item-title {
    position: relative;
    height: 38px;
    font-weight: 600;
    font-size: 16px;
    color: #fff;

    div {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    // .scroll-item-title-before {
    //   left: 16px;
    //   width: 4px;
    //   height: 22px;
    //   background: #1890ff;
    // }

    .scroll-item-title-content {
      // left: 28px;
    }

    .scroll-item-title-after {
      right: 28px;
    }
  }

  .scroll-item-content {
    // padding: 0 20px;
  }
}

.top-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.performance-box {
  .performance-text {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
  }

  .schedule-box {
    position: relative;
    height: 18px;
    width: 100%;
    background-color: rgba(255, 255, 255, .3);

    .schedule-inner {
      position: absolute;
      left: 0;
      top: 0;
      height: 18px;
      background-color: rgba(255, 255, 255, .7);
    }
  }
}

.sensor-box {
  .sensor-info {
    display: flex;
    justify-content: space-between;

    >div {
      display: flex;
      flex-direction: column;
      font-size: 15px;
      color: rgba(255, 255, 255, .7);

      >span:last-child {
        margin-top: 10px;
        color: #fff;
      }
    }
  }
}

.sever-info {
  >div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, 0.6);

    >span:last-child {
      display: flex;
      align-content: center;
      color: #fff;

      .svg-icon {
        margin-left: 10px;
        width: 14px;
        height: 14px;
      }
    }
  }
}

#device {
  position: relative;
  display: flex;
  padding-left: 10px;

  // padding: 10px;
  // border: 1px solid #000;
  // box-shadow: 0px 1px 10px 2px rgba(0, 21, 41, 0.35);
  // -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 21, 41, 0.35);
  .net-charts {
    position: relative;

    .net-move {
      position: absolute;
      top: -35px;
      transform: scale(0.2);
    }
  }

  >div {
    flex: 1;
    padding-left: 10px;
    height: 100%;
    border-right: 1px solid #e2e1e1;

    .net-header {
      height: 60px;
      border-bottom: 1px solid #e2e1e1;

      >p {
        color: #606266;
        font-weight: 600;
      }

      span {
        font-size: 14px;
      }
    }

    .net-container {
      width: 100%;
      height: 300px;
    }
  }

  >div:last-child {
    border-right: 0;
  }
}

.device-search {
  position: relative;
  margin: 20px 0;

  .search-time {
    margin: 0 20px;
    color: #fff;
    font-weight: 600;
  }
}

// .device-userate {
//   width: 100%;
//   height: 500px;
// }
// .head-info{
.info-text {
  color: #fff;
}

.card-container {
  margin-bottom: 20px;
}

.foot-btn {
  position: absolute;
  left: -20px;
  padding: 0 30px;
  height: 50px;
  bottom: -30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  // right:;
  width: calc(100% + 40px);
}

// .foot-btn::before {
//   content: '';
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   background-color: rgba(0, 0, 0, .3);
//   filter: blur(2px);
//   z-index: 1;
// }




.table {
  margin: 20px 0;
  font-size: 14px;
  border-collapse: collapse;
  width: 95%;
  border: 1px solid #c0c0c0;
  // margin-bottom: 25px;
}

.table th,
.table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #c0c0c0;
}

.propreintab {
  border-left: 1px solid #000;
  border-top: 1px solid #000;

  .propreincell {
    padding: 0 !important;

    >div {
      display: flex;
      // display: table;
      // width: 100%;
      // text-align: center;
      justify-content: center;
      align-items: center;
      height: 50px;
      border-bottom: 1px solid #000;

      span {
        // display: table-cell;
        // padding: 0;
        height: 100%;
        // width: 120px;

        border-right: 1px solid #000;
      }

      span:frist-child {
        //  flex: 1;
        width: 120px;
      }

      span:last-child {
        flex: 4;
        // flex: 1;
        // margin-left: 120px;
      }
    }
  }
}

::v-deep .el-tabs__item {
  font-weight: 600;
  color: #000;
  font-size: 16px;
}

::v-deep .el-tab-pane {
  padding: 10px;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #000;
}

.title {
  position: absolute;
  top: 80px;
  left: 100px;
  font-size: 14px;

  >span::after {
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-radius: 50%;
    background: #ff0000;
  }

  span {
    margin-right: 10px;
  }

  .lastspan::after {
    background: #0000ff;
  }
}

.open {
  background-color: #e7faf0;
  border: 1px solid #d0f5e0;
  color: #13ce66;
  padding: 4px 8px;
}

.close {
  background-color: #ffeded;
  border: 1px solid #ffdbdb;
  color: #ff4949;
  padding: 4px 8px;
}

.font {
  font-weight: 600;
}

.date-box {
  display: inline-block;
  height: 100%;
  z-index: 1;
}

::v-deep .el-input__inner {
  width: 400px;
  // color: #000;
}

::v-deep .el-form-item__label {
  color: rgba(255, 255, 255, 0.6);
}
</style>
